<template>
  <div>
    <header class="header">
      <h3>这是index页面</h3>
    </header>
    <div class="wrapper">
      <div class="container-fluid">
        <div class="row fill-h">
          <div class="col-lg-12 fill-h">
            <div class="xpanel-wrapper xpanel-wrapper-1">
              <div class="xpanel tablebox">
                <!-- 地图散点 -->
                <div class="tablebox">
                  <!-- 加了height 会有滚动条出现 -->
                  <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="740px"
                  >
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="操作"
                      align="center"
                      width="300"
                    >
                      <template>
                        <el-button size="mini" type="primary">编辑</el-button>
                        <el-button size="mini" type="danger">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  created() {
    console.log(456);
  },
};
</script>

<style lang="scss" scoped>
html,
body {
  // min-height: 635px;
  font-family: "microsoft yahei", arial, sans-serif;
  background-color: #0f1c30;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
html,
body {
  // min-height: 635px;
  height: 100%;
  font-family: "microsoft yahei", arial, sans-serif;
  background-color: #0f1c30;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  margin: 0 auto;
  width: 100%;
  height: 65px;
  max-width: 1920px;
  background: url("../assets/echartsimg/header.png") center no-repeat;
  h3 {
    margin: 0;
    padding: 0;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #5dc2fe;
  }
}

.wrapper {
  // position: absolute;
  padding-top: 10px;
  min-height: 555px;
  .container-fluid {
    height: 100%;
    min-height: 100%;
    .row > div {
      padding-left: 7px;
      padding-right: 8px;
    }
    .row {
      .xpanel-wrapper {
        box-sizing: border-box;
      }
      .xpanel-wrapper-1 {
        height: 100%;
      }
      .xpanel-wrapper-2 {
        height: 100%;
      }
      .xpanel-wrapper-3 {
        height: 100%;
      }
    }
  }
}

.xpanel {
  padding: 15px;
  // padding-top: 10%;
  height: 100%;
  min-height: 700px;
  background: url("../assets/echartsimg/panel.png") center no-repeat;
  background-size: 100% 100%;
  // box-sizing: border-box;
}

/* tool */
.fill-h {
  height: 100%;
  min-height: 100%;
}
// 自己的样式
.tablebox {
  height: 100%;
  overflow: hidden;
}
</style>
